import { useState , useEffect} from 'react'
import logo from './logo.svg'
import './App.css'
import _ from 'lodash'
const Animation = (props) => {
  const {
    animation = false,
    transitionStyles = {enter:{opacity:1},leave:{opacity:0}},
    children
  } = props
  // console.log(animation, transitionStyle,children)
  // 函数运行的返回值
  const [status, setStatus] = useState( () => {
    console.log('/////')
    if(animation) return 'enter'
    else return 'leave'
  })
  useEffect(() => setStatus(animation?'enter': 'leave'),[animation])
  const prevStyle = children?.props?.style || {}
  // console.log(prevStyle)
  const animateStyle = transitionStyles[status];
  // console.log(animateStyle);
  const transitionStyle = {transition : `all 300ms ease-in-out`}
  const style = {...prevStyle,...animateStyle,...transitionStyle}
  // return React.cloneElement(
  //   React.children.only(children),
  //   {
  //     style:{
  //       ...style
  //     }
  //   }
  // )
  return (
    <div style={{...style}}>
      {children}
    </div>
  )
  // return (
  //   <div>
  //     Animation
  //     {props.children}
  //   </div>
  // )
}
function App() {
  const [play, setPlay] = useState(false)
  return (
    <div className="container">
      <button onClick = {() => setPlay(!play)}>切换</button>
      <Animation animation = {play}>
        <div className="box"></div>
      </Animation>
    </div>
  )
}

export default App
